.slide {
  height: 200px;
  position: relative;
  overflow: hidden;

  .container {
    height: 100%;
    background: #292929;

    .inner {
      height: 100%;
      white-space: nowrap;

      .item {
        display: inline-block;
        vertical-align: top;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 100%;
        width: 100%;
        position: relative;

        .title {
          position: absolute;
          left: 0;
          bottom: 0;
          right: 0;
          line-height: 35px;
          padding: 0 100px 0 10px;
          color: white;
          background: rgba(0, 0, 0, .5);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .dots {
    position: absolute;
    right: 0;
    bottom: 0;
    line-height: 35px;
    padding-right: 10px;

    .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #606060;
      display: inline-block;
      vertical-align: top;
      margin: 15px 5px 15px 5px;

      &.active {
        background: white;
      }
    }
  }

  .loading {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);

    .con {
      padding: 0 20px 0 20px;
      background: white;
      line-height: 40px;
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 3px;
      margin-left: -50px;
      margin-top: -20px;
    }
  }
}